<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VIP特权</title>
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index-all.css"/>
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
		<script src="js/axios.min.js"></script>
	</head>
	<body>
		
		<header class="danjietiyan-header vip-h" id="tuiguang-header">
			<img src="img/top.png" class="zhuangtailan">
			<p class="vip-p"><a href="javascript:;" class="iconfont icon-left" id="vip-btn"></a href=""> <span>VIP特权</span><a href="" class="iconfont icon-cloudupload-fill"></a href=""></p>
			<figure>
				<div class="v-pic-wrap">
					<img src="img/IMG_20190511_110952.jpg" >
				</div>
				<figcaption>
					<p class="userName">莫相识</p>
					<p>未开通特权</p>
				</figcaption>
			</figure>
		</header>
		<div class="vip-con">
			
			<div class="vip-con-top">
				<p>您想购买多久的艺伙会员呢？</p>
				<ul>
					<li class="vip-active">
						<p>包年</p>
						<p class="vip-font-color">￥365</p>
					</li>
					<li>
						<p>包季</p>
						<p>￥120</p>
					</li>
					<li>
						<p>包月</p>
						<p>￥45</p>
					</li>
				</ul>
				<a href="">立即开通</a>
				<p><a href="">《会员服务协议》</a></p>
			</div>
			<div class="meet-tit"><em class="meet-left"></em>加入VIP会员专属权益</div>
			<ul class="vip-bottom">
			<li>
				<em class=""><img src="img/形状.png" ></em>
				<div>
					<p>轻松入门免费学</p>
					<p>在这里，所有艺术入门课程全部免费</p>
				</div>
			</li>
			<li>
				<em class=""><img src="img/直播.png" ></em>
				<div>
					<p>大咖直播免费学</p>
					<p>在这里，所有艺术入门课程全部免费</p>
				</div>
			</li>
			<li>
				<em class=""><img src="img/优惠券.png" ></em>
				<div>
					<p>更多折扣</p>
					<p>最超值，深度艺术提升课程享受九折优惠</p>
				</div>
			</li>
		</ul>
		</div>
		
		<script type="text/javascript">
			window.onload=function(){
				let token=localStorage.getItem('token')
					//用户信息接口
			let UserMassegetApi='http://15637237221.wicp.vip/yh/mine/showUserInformation.do'
			axios.post(UserMassegetApi,{
				token
			}).then(res=>{
				console.log(res.data.info);
				let obj=res.data.info
				let userImg=document.querySelector('.v-pic-wrap')
				let html=''
				html=`<img src="${obj.userImgUrl}">`
				userImg.innerHTML=html;
				let userName=document.querySelector('.userName')
			
				let html1=''
				html1=`${obj.username}`
				userName.innerHTML=html1;
			
			})



				
				let btn=document.querySelector('#vip-btn')
					console.log(btn)
				btn.onclick=function(){
					console.log(1)
					history.back()
				}
				
				let btns = document.querySelectorAll('.vip-con-top li')
				for(let i= 0;i<btns.length;i++){
					btns[i].onclick=function(){
						console.log(1)
						for(let j = 0;j<btns.length;j++){
							btns[j].classList.remove('vip-active')
						}
						btns[i].classList.add('vip-active')
					}
					
				}
			}
		</script>
	</body>
</html>
